<template>
	<view class="top">
			<view v-for="item in choose" 
			:class="choosenum===item.code ? 'choose':'default'"
			@tap="changenum(item.code)">
				{{item.name}}
			</view>
	</view>
	<view class="roll_center" v-for="item in AllTicket" key="index" v-if="choosenum===1">
			<view class="money">
				<view class="count" v-if="item.couponType===131">
					￥{{item.discountAmount}}
				</view>
				<view class="count" v-else>
					打{{item.discountRate}}折
				</view>
				
				<view class="condition" v-if="item.conditionMet > 0">
					满{{item.conditionMet}}元可用
				</view>
				<view class="condition" v-else>
					无门槛
				</view>
			</view>
			<view class="info">
					<view class="introduce">{{item.couponName}}</view>
					<view class="date">
						<view style="display: inline-block;">
							<text style="color: #ff0000;font-size: 15px;display: block;">{{item.validStartTime}} &nbsp;&nbsp;&nbsp;</text>
							<text style="color: #ff0000;font-size: 15px;display: block;">{{item.validEndTime}} &nbsp;&nbsp;&nbsp;</text>
						</view>
					</view>
			</view>
	</view>
	<view class="roll_center" v-for="item in AllTicket" key="index" v-else>
			<view class="money" style="background-color: grey;">
				<view class="count" v-if="item.couponType===131">
					￥{{item.discountAmount}}
				</view>
				<view class="count" v-else>
					打{{item.discountRate}}折
				</view>
				
				<view class="condition" v-if="item.conditionMet > 0">
					满{{item.conditionMet}}元可用
				</view>
				<view class="condition" v-else>
					无门槛
				</view>
			</view>
			<view class="info">
					<view class="introduce">{{item.couponName}}</view>
					<view class="date">
						<view style="display: inline-block;">
							<text style="color: #c5c5c5;font-size: 15px;display: block;">{{item.validStartTime}} &nbsp;&nbsp;&nbsp;</text>
							<text style="color: #c5c5c5;font-size: 15px;display: block;">{{item.validEndTime}} &nbsp;&nbsp;&nbsp;</text>
						</view>
					</view>
			</view>
	</view>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import request from '../../../utils/request';
import { getUserProfile } from "@/api/system/user"
	const AllTicket=ref('')

	//未使用的优惠券
	const noUseTicket=ref('')
	//已经使用过的优惠券
	const hasUseTicket=ref('')
	//未使用,但已经过期的优惠券
	const noTimeTicket=ref('')
	const userId = ref('')
	const MerchantId =ref('')
	const key=ref('')
	const createTime= ref('')
	const endTime=ref('')
	
	//选择数字
	const choosenum=ref(1)
	
	//定一个对象
	const choose=ref([{
		name:'未使用',
		code:1
	},{
		name:'已使用',
		code:2
	},{
		name:'已过期',
		code:3
	}
	])
	onMounted(()=>{
		//获取当前用户的id
		getUserProfile().then((res)=>{
			userId.value=res.data.userId
			request({
				url:'/gyf/ticket/getUserTicket?userId='+userId.value+'&status=136',
				method:'get',
			})
			.then((res)=>{
				console.log("拿到的优惠券数据")
				console.log(res)
				AllTicket.value=res.data
			}).catch((err)=>{
				console.log(err)
			})
		}).catch((err)=>{
			console.log("获取用户信息失败")
			console.log(err)
		})
		
		

	})
	
	//写个watch监听器,监听choosenum的变化
	watch(choosenum,(newval,oldval)=>{
		if(newval===1){
			request({
				url:'/gyf/ticket/getUserTicket?userId='+userId.value+'&status=136',
				method:'get',
			})
			.then((res)=>{
				const all=[]
				for (let i = 0; i < res.data.length ; i++) {
 				const nowtime = new Date().getTime()
				const time = new Date(res.data[i].validEndTime).getTime()
					//开始比较时间大小
					if(nowtime>time){
						all.push(res.data[i])
					}
				}
				AllTicket.value=all
			}).catch((err)=>{
				console.log(err)
			})
		}else if(newval===2){
			request({
				url:'/gyf/ticket/getUserTicket?userId='+userId.value+'&status=137',
				method:'get',
			})
			.then((res)=>{
				AllTicket.value=res.data
			}).catch((err)=>{
				console.log(err)
			})
		}else if(newval===3){
			request({
				url:'/gyf/ticket/getUserTicket?userId='+userId.value+'&status=136',
				method:'get',
			})
			.then((res)=>{
				const all=[]
				for (let i = 0; i < res.data.length ; i++) {
 				const nowtime = new Date().getTime()
				const time = new Date(res.data[i].validEndTime).getTime()
					//开始比较时间大小
					if(nowtime>time){
						all.push(res.data[i])
					}
				}
				AllTicket.value=all
				
				
			}).catch((err)=>{
				console.log(err)
			})
		}
		
	})
	
	
	
	//开始选择优惠券类型
	const changenum=(code)=>{
		choosenum.value = code
	}
</script>

<style lang="scss" scoped>
	// 头部选项
	.top{
		width: 100vw;
		height: 5vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		.default{
			color: black;
		}
		.choose{
			color: #0000ff
		}
	}
	
	.roll_center{
		width: 95vw;
		height: 15vh;
		background-color: #e6e6e6;
		margin: 2vh auto;
		padding: 1vh 0px;
		border-radius:10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.money{
			width: 30%;
			height: 100%;
			background-color: #0055ff;
			text-align: center;
			border-radius: 10px;
			.count{
				margin: 3.5vh 0px 1vh 0px;
				font-size: 20px;
				color: white;
			}
			.condition{
				font-size: 14px;
				color:white;
			}
		}
		.info{
			width: 68%;
			height: 80%;
			margin-top: 1.5vh;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: space-between;
			font-size: 14px;
			padding: 1vh 0px 1vh 5vw;
			border-radius: 10px;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			border-left: 1px dashed dimgrey;
			.introduce{
				width: 70%;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}
</style>